<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>呆头-太极</title>
  <style>
    canvas {
      background-color: gray;
    }
  </style>
</head>
<body>
<canvas height="600" width="600"></canvas>
<script>
  let can = document.querySelector("canvas");
  let ctx = can.getContext("2d");
  let a = 1, b = 0.99
  ctx.translate(300, 300);//移动原点位置
  setInterval(function () {
    ctx.clearRect(-300, -300, 600, 600);//清空画布
    ctx.rotate(Math.PI / 360);//每次旋转3deg
    // ctx.scale(a, a);//缩放
    // if (a < 0.899) {
    //   b = 1.11
    // } else if (a > 1.101) {
    //   b = 0.99
    // }
    // a = a * b
    // console.log(a)
    tj()
  }, 100);


  function tj() {

    //大圆
    ctx.fillStyle = "white";
    //ctx.strokeStyle="red"
    ctx.arc(0, 0, 300, Math.PI / 2, Math.PI / 2 * 3, false);
    ctx.fill();
    //ctx.stroke()
    ctx.beginPath();
    ctx.fillStyle = "black";
    ctx.arc(0, 0, 300, Math.PI / 2, Math.PI / 2 * 3, true);
    ctx.fill();
    //边圆
    ctx.beginPath();
    ctx.fillStyle = "white";
    ctx.arc(0, -150, 150, 0, Math.PI * 2);
    ctx.fill();
    ctx.beginPath();
    ctx.fillStyle = "black";
    ctx.arc(0, 150, 150, 0, Math.PI * 2);
    ctx.fill();
    //小圆
    ctx.beginPath();
    ctx.fillStyle = "black";
    ctx.arc(0, -150, 37.5, 0, Math.PI * 2);
    ctx.fill();
    ctx.beginPath();
    ctx.fillStyle = "white";
    ctx.arc(0, 150, 37.5, 0, Math.PI * 2);
    ctx.fill();


  }

  /*
    //大圆
    ctx.fillStyle="white";
    ctx.arc(0,0,300,Math.PI/2,Math.PI/2*3,false);
    ctx.fill();
    ctx.beginPath();
    ctx.fillStyle="black";
    ctx.arc(0,0,300,Math.PI/2,Math.PI/2*3,true);
    ctx.fill();
    //边圆
    ctx.beginPath();
    ctx.fillStyle="white";
    ctx.arc(0,-150,150,0,Math.PI*2);
    ctx.fill();
    ctx.beginPath();
    ctx.fillStyle="black";
    ctx.arc(0,150,150,0,Math.PI*2);
    ctx.fill();
    //小圆
    ctx.beginPath();
    ctx.fillStyle="black";
    ctx.arc(0,-150,37.5,0,Math.PI*2);
    ctx.fill();
    ctx.beginPath();
    ctx.fillStyle="white";
    ctx.arc(0,150,37.5,0,Math.PI*2);
    ctx.fill();

  */


</script>
</body>
</html>
